<template>
	<div>
		<div v-for="item in orders" class="order_main">
			<div class="order_head">
				<span>订单编号:{{item[0].order_id}}</span>
				<span>订单时间:{{item[0].order_time|dataForm}}</span>
			</div>
			<div class="order_center">
				<table style="width: 100%;text-align: center;">
					<tr>
						<td></td>
						<td>商品名称</td>
						<td>单价</td>
						<td>数量</td>
						<td>小计</td>
					</tr>
					<tr v-for="it in item">
						<td>
							<img :src="'http://106.15.179.105:3000/'+it.product_picture" alt="" style="width: 120px;">
						</td>
						<td @click="goDetail(it.product_id)">{{it.product_name}}</td>
						<td>{{it.product_price}}元</td>
						<td>{{it.product_num}}</td>
						<td style="color: #FF6700;">{{it.product_price*it.product_num}}元</td>
					</tr>
				</table>
			</div>
			<div class="order_foot">
				<span>共<span style="color: #FF6700;">{{item|getNum}}</span>件商品</span>
				<span style="color: #FF6700;">合计: <span style="font-size: 24px;">{{item|getprice}}元</span></span>
			</div>
		</div>
	</div>
</template>

<script>
	import orderApi from "@/api/order.js"
	export default{
		data(){
			return{
				orders: [
							[
								{"id":3745,"order_id":29091618793789096,"user_id":2909,"product_id":3,"product_num":7,"product_price":2599,"order_time":1618793789098,"product_name":"小米CC9 Pro","product_picture":"public/imgs/phone/Mi-CC9.png"},
								{"id":3746,"order_id":29091618793789096,"user_id":2909,"product_id":2,"product_num":3,"product_price":2599,"order_time":1618793789098,"product_name":"Redmi K30 5G","product_picture":"public/imgs/phone/Redmi-k30-5G.png"}
							],
							[
								{"id":3742,"order_id":29091618793305920,"user_id":2909,"product_id":2,"product_num":5,"product_price":2599,"order_time":1618793305922,"product_name":"Redmi K30 5G","product_picture":"public/imgs/phone/Redmi-k30-5G.png"},
								{"id":3743,"order_id":29091618793305920,"user_id":2909,"product_id":4,"product_num":4,"product_price":699,"order_time":1618793305922,"product_name":"Redmi 8","product_picture":"public/imgs/phone/Redmi-8.png"},
								{"id":3744,"order_id":29091618793305920,"user_id":2909,"product_id":11,"product_num":2,"product_price":2799,"order_time":1618793305922,"product_name":"小米全面屏电视E65A","product_picture":"public/imgs/appliance/MiTv-E65A.png"}
							],
							[
								{"id":3661,"order_id":29091618555494770,"user_id":2909,"product_id":16,"product_num":1,"product_price":2599,"order_time":1618555494768,"product_name":"米家互联网空调C1（一级能效）","product_picture":"public/imgs/appliance/AirCondition-V1C1.png"}
							],
							[
								{"id":3659,"order_id":29091618555408096,"user_id":2909,"product_id":2,"product_num":1,"product_price":2599,"order_time":1618555408096,"product_name":"Redmi K30 5G","product_picture":"public/imgs/phone/Redmi-k30-5G.png"},
								{"id":3660,"order_id":29091618555408096,"user_id":2909,"product_id":4,"product_num":2,"product_price":699,"order_time":1618555408096,"product_name":"Redmi 8","product_picture":"public/imgs/phone/Redmi-8.png"}
							]
						]
			}
		},
		activated(){
			this.getOrder()
		},
		methods:{
			async getOrder(){
				let {data:res} = await orderApi.getOrder({user_id: this.$store.state.user_id})
				console.log(res)
			},
			goDetail(id){
				this.$router.push("/detail?productID="+id)
			}
		},
		filters:{
			getNum:function(value){
				var num = 0
				value.forEach(item=>{
					num += item.product_num
				})
				console.log(num)
				return num
			},
			getprice:function(value){
				var price = 0
				value.forEach(item=>{
					price += item.product_num*item.product_price
				})				
				return price
			}
		}
	}
</script>

<style >
	.order_main{
		width: 1225px;
		margin: 20px auto;
		background-color: white;
		
	}
	.order_head{
		display: flex;
		justify-content: space-between;
		height: 60px;
		line-height: 60px;
		padding: 0 20px ;
		border-bottom: solid 2px #FF6700;
	}
	td{
		width: 20%;
	}
	.order_center{
		padding: 20px 0;
		border-bottom: solid 2px #FF6700;
	}
	.order_foot{
		padding: 10px 20px;
		display: flex;
		justify-content: space-between;
	}
</style>
